<template>
  <el-cascader
    style="width: 100%"
    v-model="areaCode"
    :options="areaArr"
    :props="props"
    clearable
    :size="size"
    @change="handlerCascadeChange"
    :placeholder="placeholder"
  ></el-cascader>
</template>

<script>
import { childenNode } from "@/api/public/areaSelector";
export default {
  name: "EAreaSelector",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    // 搜索到多级级别
    areaLevel: {
      type: Number,
      default: 3,
    },
    size: {
      type: String,
      default: "small",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
  },
  watch: {
    value: {
      immediate: true,
      async handler(val) {
        this.areaCode = val;
      },
    },
  },
  data() {
    const self = this;
    return {
      areaCode: [],
      areaArr: [],
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          let res = await childenNode(node.value ? node.value : "");
          let resMap = res.data.bdata.map((item) => {
            return {
              value: item.id,
              label: item.name,
              // 为 true就不往下展开
              leaf: level >= self.areaLevel - 1,
            };
          });
          resolve(resMap);
        },
      },
    };
  },
  methods: {
    //级联选择器——change
    handlerCascadeChange(value) {
      this.$emit("input", value);
    },
  },
};
</script>

<style scoped></style>
